/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-27 17:32:36
 * @Description: 首页-应用工具-APP评论新消息检索-详情-综合信息
 */
import React from "react";
import "./style.scss";
import { Modal, Button, Select, message, Input } from "antd";
import { observer, inject } from "mobx-react";
import echarts from "echarts";
import RadarIcon from "../images/radar-icon.png";

const { Option } = Select;

@inject("APPIRComprehensiveStore")
@observer
class APPIRComprehensive extends React.Component {
    state = {
        showGradeContent: false
    };
    componentDidMount() {
        this.renderRadarChart();
        this.renderAreaChart();
    }
    renderRadarChart() {
        const myChart = echarts.init(document.getElementById("APPIRComprehensiveRadarChart"));

        this.props.APPIRComprehensiveStore.getRadarData(data => {
            const max = Math.max(...data.map(d => d.score));
            const indicator = [];
            const value = [];
            data.forEach(d => {
                indicator.push({
                    text: d.name,
                    max: max * 1.2, // 扩大 1.2 倍
                    color: "#e1eaf9"
                });
                value.push(d.score);
            });

            const option = {
                tooltip: {
                    trigger: "axis"
                },
                radar: {
                    indicator,
                    splitNumber: 3,
                    axisLine: {
                        lineStyle: {
                            color: "#3c4668"
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: ["#e1eaf9", "#3c4668", "#3c4668"]
                        }
                    },
                    splitArea: {
                        show: false
                    },
                    radius: 90,
                    center: ["50%", "50%"]
                },
                series: [
                    {
                        type: "radar",
                        tooltip: {
                            trigger: "item"
                        },
                        symbol: `image://${RadarIcon}`,
                        symbolSize: 10,
                        lineStyle: {
                            color: "transparent"
                        },
                        itemStyle: {
                            normal: {
                                areaStyle: {
                                    color: "#354270",
                                    opacity: 1
                                }
                            }
                        },
                        data: [
                            {
                                value,
                                name: "评分维度"
                            }
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        });
    }
    renderAreaChart() {
        const myChart = echarts.init(document.getElementById("APPIRComprehensiveAreaChart"));

        this.props.APPIRComprehensiveStore.getTrendData(data => {
            const option = {
                grid: {
                    top: 50,
                    right: 50,
                    height: "73%",
                    width: "90%"
                },
                tooltip: {
                    show: true,
                    trigger: "axis",
                    backgroundColor: "#353e55",
                    padding: [10, 100, 10, 10],
                    axisPointer: {
                        type: "line",
                        lineStyle: {
                            color: "#8893A7",
                            width: 2
                        }
                    },
                    textStyle: {
                        color: "#e1eaf9"
                    },
                    formatter: "时间：{b}<br/>评分：{c}"
                },
                xAxis: {
                    type: "category",
                    data: [...data.map(d => d.name)],
                    axisLine: {
                        lineStyle: {
                            color: "#8893A7",
                            width: 2
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: "#8893A7",
                        fontSize: 14
                    },
                    splitLine: {
                        show: false
                    },
                    boundaryGap: false
                },
                yAxis: {
                    type: "value",
                    axisLine: {
                        lineStyle: {
                            color: "#8893A7",
                            width: 2
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: "#8893A7",
                        fontSize: 14
                    },
                    splitLine: {
                        show: false
                    }
                },
                series: [
                    {
                        data: [...data.map(d => d.score)],
                        type: "line",
                        smooth: true,
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#354270" // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#2c3140" // 100% 处的颜色
                                    }
                                ]
                            }
                        },
                        lineStyle: {
                            color: "#1971ee",
                            width: 2
                        },
                        symbol: `image://${RadarIcon}`,
                        symbolSize: 14
                    }
                ]
            };
            myChart.setOption(option);
        });
    }
    onChangeLevel = value => {
        message.info(`已选择-${value}`);
    };
    onInputChange = e => {
        console.log(e.target.value);
    };

    render() {
        const { showGradeContent } = this.state;
        return (
            <div className="APPIR-comprehensive">
                <div className="s-left">
                    <div className="c-top">
                        <div className="p-center">
                            <div className="score">78.86</div>
                            <div>
                                高于同类APP <span className="blue-text">12</span> 分
                            </div>
                            <div>
                                风险评分已修正{" "}
                                <span className="btn" onClick={() => this.setState({ showGradeContent: true })}>
                                    查看
                                </span>
                            </div>
                        </div>
                    </div>
                    <div className="c-foot">
                        <div className="tip">评分维度</div>
                        <div
                            className="radar-chart"
                            id="APPIRComprehensiveRadarChart"
                            style={{ width: 420, height: 240 }}
                        />
                    </div>
                </div>
                <div className="s-right">
                    <div className="c-top">
                        <div className="tip">近一年风险评分走势</div>
                        <div
                            className="area-chart"
                            id="APPIRComprehensiveAreaChart"
                            style={{ width: 1020, height: 340 }}
                        />
                    </div>
                    <div className="c-foot">
                        <div className="tip">APP对外发布介绍</div>
                        <p>很多文本</p>
                        <p>很多文本很多文本</p>
                        <p>很多文本很多文本很多文本</p>
                        <p>很多文本很多文本很多文本很多文本</p>
                    </div>
                </div>
                {showGradeContent && (
                    <Modal
                        title="专家风险评分"
                        visible={showGradeContent}
                        destroyOnClose
                        cancelText="取消"
                        className="grade-content"
                        footer={
                            <div className="grade-btns">
                                <Button type="default" onClick={() => this.setState({ showGradeContent: false })}>
                                    重置
                                </Button>
                                <Button type="default" onClick={() => this.setState({ showGradeContent: false })}>
                                    取消
                                </Button>
                                <Button type="primary" onClick={() => this.setState({ showGradeContent: false })}>
                                    确认
                                </Button>
                            </div>
                        }
                        onCancel={() => this.setState({ showGradeContent: false })}
                    >
                        <div className="grad-fix">
                            <div className="part">
                                <div className="title">修改记录</div>
                                <p style={{ marginBottom: 30 }}>
                                    <span style={{ marginRight: 140 }}>
                                        修正前 <em className="yellow-text">38.96</em>
                                    </span>
                                    <span>
                                        修正后 <em className="green-text">98.96</em>
                                    </span>
                                </p>
                                <p>修正日期 2019-12-12 12:12:33</p>
                            </div>
                            <div className="part">
                                <div className="title">重新修正</div>
                                <div className="inputs">
                                    <Select
                                        style={{ width: 200 }}
                                        size="large"
                                        placeholder="提升风险等级"
                                        onChange={this.onChangeLevel}
                                    >
                                        <Option value="level1">提升1级（低）</Option>
                                        <Option value="level2">提升2级（中）</Option>
                                        <Option value="level3">提升3级（高）</Option>
                                    </Select>
                                    <Input
                                        size="large"
                                        type="number"
                                        onChange={this.onInputChange}
                                        className="fix-input"
                                    />
                                </div>
                                <p>说明：</p>
                                <p>1、可直接选择提升等级或自定义提升分数两种形式；</p>
                                <p>2、自定义分数可精确到小数点后两位。</p>
                            </div>
                        </div>
                    </Modal>
                )}
            </div>
        );
    }
}

export default APPIRComprehensive;
